<template>
    <view>
        <template v-for="(item, index) in cartStore.cartList" :key="index">
            <view class="margin-base bg-white radius-2xl">
                <view class="padding-lr-base padding-tb-xl flex align-center">
                    <customCheckbox
                        v-model="item.checked"
                        size="35rpx"
                        @change="
                            (event) => {
                                selectStore(event, item.list);
                            }
                        "
                    />
                    <view class="margin-left-sm">
                        <text class="text-bold">{{ item.company }}</text>
                        <text class="margin-left-sm cuIcon-right text-grey"></text>
                    </view>
                </view>
                <view
                    v-for="sku in item.list"
                    :key="sku.id"
                    class="padding-lr-base padding-bottom-xl"
                    @click="goPage('/pages/goods/goodsdetail?id=' + sku.itemid)"
                >
                    <view class="flex align-center">
                        <customCheckbox
                            v-model="sku.isCheck"
                            size="30rpx"
                            @change="
                                (event) => {
                                    selectSku(event, sku.id, item);
                                }
                            "
                        />
                        <view class="flex" style="flex: 1">
                            <image class="size-img-150 radius-lg margin-right-lg" :src="sku.thumb" mode="widthFix" />
                            <view style="flex: 1">
                                <view class="text-bold margin-bottom-sm">{{ sku.title }}</view>
                                <view class="text-grey">规格：{{ sku.name }}</view>
                                <view class="margin-top-sm flex align-center justify-between">
                                    <view class="text-bold text-red">
                                        <text>￥</text>
                                        <text class="text-lg">{{ sku.price }}</text>
                                    </view>
                                    <view>
                                        <goodsNumInput v-model="sku.num" :amount="sku.amount" :sku_id="sku.id" @set-num="setNum"></goodsNumInput>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </template>
    </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { goPage } from "@/utils";
import { useCartStore } from "@/store/module/cart";

import goodsNumInput from "@/components/input/goods-num-input.vue";
import customCheckbox from "@/components/input/custom-checkbox.vue";

const cartStore = useCartStore();

const setNum = (val: AnyObject) => {
    if (val.isApi) {
        cartStore.setCartNum(val);
    }
};

const selectStore = (is_check: boolean, list: any) => {
    const temp: any[] = list.map((item: any) => {
        return item.id;
    });
    cartStore.selectProduct(temp, is_check, true);
};

// 选择并计算
const selectSku = (is_check: boolean, id: any, company: any) => {
    cartStore.selectProduct(id, is_check, true);
};
</script>

<style scoped lang="scss"></style>
